<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">

<head th:include="include :: header"></head>

<body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="order-form">
                    <input type="hidden" id="deptId" name="deptId">
                    <input type="hidden" id="parentId" name="parentId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>充电桩号：</label>

                                    <input type="text" id="stakeCode" name="stakeCode" placeholder="桩号" />


                            </li>
                            <li>
                                <label>充电站名：</label>

                                    <select name="stationCode" id="stationCode">
                                        <option value="">请选择</option>
                                        <option th:each="sta : ${stations}" th:text="${sta.name}" th:value="${sta.num}"></option>
                                    </select>


                            </li>
                            <li>
                                <label>充电枪号：</label>

                                    <select id="gunCode" name="gunCode" th:with="type=${@dict.getType('gun_code')}">
                                        <option value="">请选择</option>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                    </select>

                                <!--<input type="text" id="gunCode" name="gunCode" placeholder="充电枪编号"/>-->

                            </li>
                            <li>
                                <label>充电模式：</label>

                                    <select id="chargeMs" name="chargeMs" th:with="type=${@dict.getType('charge_ms')}">
                                        <option value="">请选择</option>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                    </select>


                            </li>
                            <li>
                                <label>订单状态：</label>

                                    <select id="chargeState" name="chargeState" th:with="type=${@dict.getType('order_status')}">
                                        <option value="">请选择</option>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                    </select>

                            </li>
                            <li>
                                <label>手机号码：</label>

                                    <input type="text" id="userPhone" name="userPhone" placeholder="手机号码" />


                            </li>
                            <li>
                                <label>支付方式：</label>

                                    <select id="payType" name="payType" th:with="type=${@dict.getType('station_payType')}">
                                        <option value="">请选择</option>
                                        <option value="all" selected>全部</option>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                    </select>
                            </li>
                            <!--<li class="select-time">
                                <label>交易时间： </label>
                                <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                                <span>-</span>
                                <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                            </li>-->
                            <li class="col-sm-12 text-center">
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="reLoad()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="exportE()" shiro:hasPermission="business:cdzIndent:export"><i class="fa fa-download"></i>&nbsp;导出</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <!--  <div class="btn-group-sm hidden-xs" id="toolbar" role="group">
            <a class="btn btn-success" onclick="add()" shiro:hasPermission="business:cdzStake:add">
                <i class="fa fa-plus"></i> 新增
            </a>
        </div> -->

            <div class="col-sm-12 select-table table-striped">
                <table id="exampleTable" style="table-layout: fixed;" data-mobile-responsive="true"></table>
            </div>
        </div>
    </div>
    <div>
        <script type="text/javascript">
            var s_edit_h = 'hidden';
            var s_remove_h = 'hidden';
        </script>
    </div>
    <div shiro:hasPermission="business:cdzStake:edit">
        <script type="text/javascript">
            s_edit_h = '';
        </script>
    </div>
    <div shiro:hasPermission="business:cdzStake:remove">
        <script type="text/javascript">
            var s_remove_h = '';
        </script>
    </div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var order_status = [[${@dict.getType('order_status')}]];
        var pay_type = [[${@dict.getType('station_payType')}]];
        var charge_ms = [[${@dict.getType('charge_ms')}]];
        var end_type = [[${@dict.getType('end_type')}]];
        var refund_state = [[${@dict.getType('refund_state')}]];
        var gun_code = [[${@dict.getType('gun_code')}]];

        var prefix = ctx + "cdzIndent";
        $(function() {
            load();
        });

        function load() {
            console.log("数据加载");
            $('#exampleTable')
                .bootstrapTable({
                    method: 'get', // 服务器数据的请求方式 get or post
                    url: prefix + "/list", // 服务器数据的加载地址
                    showRefresh: true, // 是否显示刷新按钮
                    showToggle: true, // 是否显示详细视图和列表视图的切换按钮
                    showColumns: true, // 是否显示隐藏某列下拉框
                    iconSize: 'outline',
                    toolbar: '#exampleToolbar',
                    striped: false, // 设置为true会有隔行变色效果
                    dataType: "json", // 服务器返回的数据类型
                    pagination: true, // 设置为true会在底部显示分页条
                    sortable: true, //是否启用排序
                    sortName: "createTime", //  排序字段
                    sortOrder: "desc", //排序方式
                    queryParamsType: "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect: false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize: 10, // 如果设置了分页，每页数据条数
                    pageNumber: 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者
                    queryParams: function(params) {
                        return {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit: params.limit,
                            offset: params.offset,
                            pageSize: params.limit,
                            pageNum: params.offset / params.limit + 1,
                            /* beginTime: $('#startTime').val(),
                             endTime: $('#endTime').val(),*/
                            stakeCode: $('#stakeCode').val(),
                            gunCode: $('#gunCode').val(),
                            chargeMs: $('#chargeMs').val(),
                            chargeState: $('#chargeState').val(),
                            stationCode: $('#stationCode').val(),
                            userPhone: $('#userPhone').val(),
                            payType: $('#payType').val(),
                            random: new Date()
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    showExport: true,
                    //exportTypes: ['csv','txt','xml'],
                    exportDataType: 'all',
                    columns: [
                        /*  {
                             field: 'orgName', // 列字段名
                             title: '所属机构' // 列标题
                         }, */
                        {
                            field: 'stakeCode', // 列字段名
                            width: 50,
                            align: 'center',
                            title: '桩号' // 列标题
                        }, {
                            field: 'gunCode', // 列字段名
                            title: '枪号', // 列标题
                            align: 'center',
                            width: 50,
                            formatter: function(value, row, index) {
                                return $.table.selectDictLabel(gun_code, value);
                            }
                        }, {
                            field: 'stationName', // 列字段名
                            align: 'center',
                            width: 200,
                            title: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;充电站名称' +
                                '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' // 列标题
                        }, {
                            field: 'chargeMs', // 列字段名
                            title: '充电模式', // 列标题
                            width: 80,
                            align: 'center',
                            formatter: function(value, row, index) {
                                return $.table.selectDictLabel(charge_ms, value);
                            }
                        }, {
                            field: 'startTime', // 列字段名
                            width: 150,
                            align: 'center',
                            title: '充电开始时间' // 列标题
                        }, /*{
                            field: 'endTimePlan', // 列字段名
                            title: '计划结束时间' // 列标题
                        },*/ {
                            field: 'endTime', // 列字段名
                            width: 150,
                            align: 'center',
                            title: '实际结束时间' // 列标题
                        }, {
                            field: 'endType', // 列字段名
                            title: '结束方式', // 列标题
                            align: 'center',
                            width: 80,
                            formatter: function(value, row, index) {
                                return $.table.selectDictLabel(end_type, value);
                            }
                        }, {
                            field: 'chargeState', // 列字段名
                            title: '状态', // 列标题
                            align: 'center',
                            width: 80,
                            formatter: function(value, row, index) {
                                return $.table.selectDictLabel(order_status, value);
                            }
                        }, {
                            field: 'chargeDn', // 列字段名
                            title: '充电电量(度)', // 列标题
                            align: 'center',
                            width: 100
                        }, {
                            field: 'chargeLong', // 列字段名
                            title: '充电时长', // 列标题
                            align: 'center',
                            width: 100,
                            formatter: function (value, row, index) {
                                return formatSeconds(value)
                            }
                        }, {
                            field: 'userPhone', // 列字段名
                            title: '用户手机号', // 列标题
                            align: 'center',
                            width: 100
                        }, {
                            field: 'payNumberPlan', // 列字段名
                            title: '应付金额(元)', // 列标题
                            align: 'center',
                            width: 100
                        }, {
                            field: 'payNumber', // 列字段名
                            title: '实付金额(元)',
                            align: 'center',
                            width: 100, // 列标题
                            align: 'center',
                            formatter: function(value, row, index) {
                                var offMoney = row.offMoney ==null ? 0 : row.offMoney;
                                var payNumberPlan = row.payNumberPlan ==null ? 0 : row.payNumberPlan;
                                // var value = 0.030000.toString();
                                var value = (payNumberPlan-offMoney).toString();
                                value = value.substr(0,value.indexOf(".")+3);
                                return value;
                                // return 22.22500000.toFixed(2);
                            }
                        }, {
                            field: 'offType', // 列字段名
                            title: '优惠方式', // 列标题
                            align: 'center',
                            width: 80
                        },{
                            field: 'offMoney', // 列字段名
                            title: '优惠金额(元)', // 列标题
                            align: 'center',
                            width: 100
                        }, {
                            field: 'payType', // 列字段名
                            title: '支付方式', // 列标题
                            align: 'center',
                            width: 80,
                            formatter: function(value, row, index) {
                                return $.table.selectDictLabel(pay_type, value);
                            }
                        }/*, {
                            field: 'refundPrice', // 列字段名
                            title: '退款金额(元)', // 列标题
                            align: 'center',
                            width: 100
                        }, {
                            field: 'state', // 列字段名
                            title: '退款状态', // 列标题
                            align: 'center',
                            width: 150,
                            formatter: function(value, row, index) {
                                return $.table.selectDictLabel(refund_state, value);
                            }
                        }, {
                            field: 'refundReason', // 列字段名
                            title: '退款原因', // 列标题
                            align: 'center',
                            width: 100
                        }*/, {
                            field: 'createTime', // 列字段名
                            align: 'center',
                            width: 150,
                            title: '&nbsp;&nbsp;&nbsp;&nbsp;创建时间&nbsp;&nbsp;&nbsp;&nbsp;' // 列标题
                        }, {
                            title: '操作',
                            field: 'id',
                            width: 50,
                            align: 'center',
                            formatter: function(value, row, index) {
                                var a = '<a  class="btn btn-primary btn-sm ' + s_edit_h + '" href="javascript: void(0)" mce_href="#" title="编辑" onclick="edit(\'' +
                                    row.id +
                                    '\')"><i class="fa fa-edit "></i></a> ';
                                var b = '<a class="btn btn-warning btn-sm ' + s_remove_h + '" href="javascript: void(0)" title="删除"  mce_href="#" onclick="remove(\'' +
                                    row.id +
                                    '\')"><i class="fa fa-remove"></i></a> ';
                                return b;
                            }
                        }
                    ]
                });
        }

        function reLoad() {
            $('#exampleTable').bootstrapTable('refresh');
        }

        //导出
        function exportE(formId) {
            var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
            $.modal.loading("正在导出数据，请稍后...");
            $.post(prefix + "/export", $("#" + currentId).serializeArray(), function(result) {
                if (result.code == web_status.SUCCESS) {
                    window.location.href = ctx + "common/download?fileName=" + result.msg + "&delete=" + true;
                } else {
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            });
        }
        //新增
        function add() {
            // iframe层
            window.layerIndex = layer.open({
                type: 2,
                title: '添加交易订单信息',
                maxmin: true,
                shadeClose: false, // 点击遮罩关闭层
                area: ['800px', _winH + 'px'],
                content: prefix + '/add'
            });
        }

        //编辑
        function edit(id) {
            layer.open({
                type: 2,
                title: '修改交易订单信息',
                maxmin: true,
                shadeClose: false, // 点击遮罩关闭层
                area: ['800px', _winH + 'px'],
                content: prefix + '/edit/' + id // iframe的url
            });
        }

        //删除
        function remove(id) {
            layer.confirm('确定要删除选中的记录？', {
                btn: ['确定', '取消']
            }, function() {
                $.ajax({
                    url: prefix + '/remove',
                    type: "post",
                    data: {
                        'id': id
                    },
                    success: function(r) {
                        if (r.code == 0) {
                            layer.msg(r.msg);
                            reLoad();
                        } else {
                            layer.msg(r.msg);
                        }
                    }
                });
            })
        }
    </script>
</body>

</html>